<template>
  <textarea class="edit-div" contenteditable="plaintext-only" @input="changeText" v-html="innerText"></textarea>
</template>

<script>
  export default {
    name: "Markdown",
    props: {
      value: {
        type: String,
        default: "",
      }
    },
    data() {
      return {
        innerText: this.value,
      };
    },
    methods: {
      changeText() {
        this.$emit("input", this.$el.innerHTML);
      },
    },
  };

</script>
<style lang="less">
  .edit-div {
    width: 100%;
    min-height: 420px;
    word-break: break-all;
    outline: none;
    user-select: text;
    white-space: pre-wrap;
    text-align: left;
    -webkit-user-modify: read-write-plaintext-only;

    border: 0;
    border-radius: 5px;
    background-color: rgba(241, 241, 241, .98);
    width: 355px;
    resize: none;
  }

</style>
